﻿<!DOCTYPE html>
<!--作业许可证管理=》作业许可证审批-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

</head>
<body>
    
<div id="app" v-cloak>   
        <div style="width:100%;text-align:center ">
            <label style="font-weight:bold">作业许可证</label>
        </div>
        <div style="width:100%;text-align:right">
            <label>Q/G11-018-R01&nbsp;&nbsp;&nbsp;No.：___________________</label>
        </div>
        <el-form :model="Form" status-icon style="margin-top:5px;width:100%">
            <el-row style="border:1px  solid; height:40px; ">
                <!--作业单位-->
                <el-col span="2" style=" height:40px; padding-left:30px ; " offset="2">
                    {{OperatingUnit}}
                </el-col>
                <!--作业单位值-->
                <el-col span="4" style=" height:40px; padding-left:30px ; ">
                    {{OperatingUnit}}
                </el-col>
                <!--作业负责人-->
                <el-col span="2" style=" height:40px;" offset="8">
                    {{JobManagerPeople}}
                </el-col>
                <!--作业负责人值-->
                <el-col span="4" style=" height:40px;">
                    {{JobManagerPeople}}
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; height:50px; ">
                <el-col span="12" style=" height:50px;padding-left:30px">
                    <el-form-item label="工作区域：">
                        <el-select @visible-change="visibleChange" style="margin-top:3px" v-model="Form.WorkRegion"  disabled="true">
                            <el-option v-for="item in WorkRegion" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                        <el-select @visible-change="visibleChange" v-model="Form.WorkRegionA" disabled="true">
                            <el-option v-for="item in WorkRegionA" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="12" style=" height:50px;">
                    <el-form-item label="作业地点：">
                        <el-input type="text" style="width:80%;margin-top:3px;border:0px"  disabled="true" v-model="Form.JobLocation"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; height:50px; ">
                <el-col span="24" style=" height:50px; padding-left:30px">
                    <el-checkbox v-model="checked">承包商：</el-checkbox>
                    <el-select @visible-change="visibleChange" style="width:31%;margin-top:3px;" v-model="Form.ContractorList" disabled="true">
                        <el-option v-for="item in ContractorList" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; height:50px; ">
                <el-col span="12" style=" height:40px; padding-left:30px">
                    <el-form-item label="作业人： ">
                        <el-input type="text" style="width:80%;margin-top:3px;border:none" disabled="true" v-model="Form.PeopleWork"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="12" style=" height:40px;">
                    <el-form-item label="监护人：">
                        <el-input type="text" style="width:80%;margin-top:3px;border:none" disabled="true" v-model="Form.Guardian"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; height:100px; ">
                <el-col span="24" style=" height:40px; padding-left:30px">
                    <el-form-item label="工作描述：">
                        <el-input type="textarea" style="width:90%;margin-top:3px;border:none" disabled="true" v-model="Form.workDescription"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; height:50px; ">
                <el-col span="24" style=" height:40px; padding-left:30px; font-weight:bold">
                    <el-form-item label="A图纸说明： ">
                        <el-input type="text" style="width:90%;margin-top:3px;border:none" disabled="true" v-model="Form.DrawingDescription"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="border:1px  solid; border-top:0px;">
                <el-col span="8" style="  padding-left:30px; font-weight:bold">
                    <el-form-item label="B-工作类型： ">
                        <br />
                        <!--<el-checkbox-group v-model="Form.CheckJobType" @change="handleCheckedCitiesChangeJobType">
            <el-checkbox v-for="city in JobType" :label="city.value" :key="city.key">{{city.value}}</el-checkbox>
        </el-checkbox-group>-->

                    </el-form-item>
                    {{JobTypeStrs}}

                </el-col>
                <el-col span="8" style="  padding-left:30px; font-weight:bold">
                    <el-form-item label="C-危害识别： ">
                        <br />
                        <el-checkbox-group v-model="Form.CheckHazardIdentification" @change="handleCheckedCitiesChangeHazardIdentification">
                            <el-checkbox v-for="city in HazardIdentification" :label="city.value" :key="city.key">{{city.value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col span="8" style="  padding-left:30px; font-weight:bold">
                    <el-form-item label="D-个人安全防护： ">
                        <br />
                        <el-checkbox-group v-model="Form.CheckPersonalSecurityProtection" @change="handleCheckedCitiesChangeProtection">
                            <el-checkbox v-for="city in PersonalSecurityProtection" :label="city.value" :key="city.key">{{city.value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; ">
                <el-col span="24" style="  padding-left:30px; font-weight:bold">
                    <el-form-item label="E-工作前安全措施（工作区域准备）： ">
                        <br />
                        <el-checkbox-group v-model="Form.CheckPreworkSafetyMeasures" @change="handleCheckedCitiesChangeMeasures">
                            <el-checkbox v-for="city in PreworkSafetyMeasures" :label="city.value" :key="city.key">{{city.value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;  ">
                <el-col span="24" style="  padding-left:30px; font-weight:bold">
                    <el-form-item label="F-安全措施确认： ">
                        <br />
                        <el-checkbox-group v-model="Form.CheckF_PreworkSafetyMeasures" @change="handleCheckedCitiesChangeF_PreworkSafety">
                            <el-checkbox v-for="city in F_PreworkSafetyMeasures" :label="city.value" :key="city.key">{{city.value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;  height:50px; border-bottom:0px ">
                <el-col span="24" style="  padding-left:30px; ">
                    <el-form-item label="作业审批人： ">
                        <el-select @visible-change="visibleChange" style="margin-top:3px" v-model="Form.JobApproverDepartment">
                            <el-option v-for="item in JobApproverDepartment" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                        <el-select @visible-change="visibleChange" v-model="Form.JobApprover">
                            <el-option v-for="item in JobApprover" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;  height:50px; border-bottom:0px ">
                <el-col span="24" style="  padding-left:30px; ">
                    <el-form-item label="属地主管： ">
                        &nbsp;&nbsp;
                        <el-select @visible-change="visibleChange" style="margin-top:3px" v-model="Form.TerritorialSupervisorDepartment">
                            <el-option v-for="item in TerritorialSupervisorDepartment" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                        <el-select @visible-change="visibleChange" v-model="Form.TerritorialSupervisorPeople">
                            <el-option v-for="item in TerritorialSupervisorPeople" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;    ">
                <el-col span="2" style="  padding-left:20px; ">
                    <el-form-item label="受影响相关方： ">
                        &nbsp;&nbsp;<br />
                        <a href="javascript:void(0)" @click="UserInput('tj')">添加</a>
                    </el-form-item>
                </el-col>
                <el-col span="22" style="  padding-left:30px; ">
                    <el-table :data="Form.AffectedParties"
                              border
                              style="width:90%">
                        <el-table-column prop="unit"
                                         label="单位名称"
                                         width="180">
                        </el-table-column>
                        <el-table-column prop="unitPeople"
                                         label="确认人"
                                         width="180">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="deleteRow(scope.$index, Form.AffectedParties)"
                                           type="text"
                                           size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;    ">
                <el-col span="2" style="  padding-left:30px; ">
                    <el-form-item label="特殊作业许可证及相关表格： ">
                        <br />
                        <a href="javascript:void(0)" @click="SpecialJobSelection('tj')">添加</a>
                    </el-form-item>
                </el-col>
                <el-col span="22" style="  padding-left:30px; ">
                    <el-table :data="Form.SpecialWorkPermitTable"
                              border
                              style="width: 90%">
                        <el-table-column prop="JobTicketName"
                                         label="作业票证名称"
                                         width="180">
                        </el-table-column>
                        <el-table-column prop="JobTicketCode"
                                         label="作业票证编号"
                                         width="180">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="deleteRow(scope.$index, Form.SpecialWorkPermitTable)"
                                           type="text"
                                           size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;    ">
                <el-col span="2" style="  padding-left:30px; ">
                    <el-form-item label="附件管理： ">
                        <br />
                        <a href="javascript:void(0)" @click="Attachment('tj')">上传</a>
                    </el-form-item>
                </el-col>
                <el-col span="22" style="  padding-left:30px; ">
                    <el-table :data="Form.Attachment"
                              border
                              style="width: 90%">
                        <el-table-column prop="AttachmentName"
                                         label="附件名称"
                                         width="180">
                        </el-table-column>
                        <el-table-column prop="AttachmentUploadTime"
                                         label="上传时间"
                                         width="180">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="deleteRow(scope.$index, Form.Attachment)"
                                           type="text"
                                           size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item style="text-align:center; padding-top:5px">
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnBack}}</el-button>-->
                </el-form-item>
            </el-row>
        </el-form>
        <el-dialog title="" :visible.sync="ListItem.dialogVisible" width="60%" height="90%" top="0vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:400px;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">

        //var JobTypeOptions = getDicData('04');
        //var HazardIdentificationOptions = getDicData('05');
        //var PersonalOptions = getDicData('06');
        //var PreworkSafetyOptions = getDicData('07');
        //var F_PreworkSafetyOptions = getDicData('17');
        app = new Vue({
            el: '#app',
            data: {
                id: '',
                Form: {
                    id: guidEmpty,
                    WorkRegion: '',
                    WorkRegionA: '',
                    ContractorList: '',
                    JobApprover: '',
                    JobApproverDepartment: '',
                    TerritorialSupervisorDepartment: '',
                    TerritorialSupervisorPeople: '',
                    JobLocation: '',//作业地点
                    PeopleWork: '',//作业人
                    Guardian: '',//监护人
                    workDescription: '',//工作描述
                    DrawingDescription: '',//图纸说明

                    CheckJobType: ['非计划性维修工作'],//工作类型选中
                    CheckHazardIdentification: [],//危害意识选中
                    CheckPersonalSecurityProtection: [],//个人安全防护选中
                    CheckPreworkSafetyMeasures: [],//工作前安全措施（工作区域准备）选中
                    CheckF_PreworkSafetyMeasures: [],//安全措施确认  选中

                    AffectedParties: [],//受影响相关方
                    SpecialWorkPermitTable: [],//特殊票证
                    Attachment: [],//附件


                },
                JobType: [],//工作类型
                JobTypeStrs: 'xxx',//工作类型_合并一个字符串
                HazardIdentification:[],//危害意识
                PersonalSecurityProtection: [],//个人安全防护
                PreworkSafetyMeasures: [],//工作前安全措施（工作区域准备）：
                F_PreworkSafetyMeasures: [],//安全措施确认
                ListItem: ListItem,
                OperatingUnit: 'Hello Vue!',
                JobManagerPeople: '张XX',
                checked: false,
                SpecialWorkTable: '',
                AffectedPartiesTable: '',
                AttachmentManagement: '',
                WorkRegion: [],
                WorkRegionA: [],
                ContractorList: [],
                JobApprover: [],
                JobApproverDepartment: [],
                TerritorialSupervisorDepartment: [],
                TerritorialSupervisorPeople: [],
                rules: {},

            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                handleNodeClick: function (data) {
                    console.log(data);
                },
                deleteRow: function (index, rows) {
                    rows.splice(index, 1);
                },
                getData: function () {
                    getData(this, '/api/JobLicenseManagement/get?id=' + this.id);
                },
                UserInput: function (val, id) { DialogShow(this, val, "AffectedPartiesAddPages.html", id); },


                WorkType: function (val, id) { DialogShow(this, val, "WorkTypeEditPage.html", id); },
                HazardIdentification: function (val, id) { DialogShow(this, val, "HazardIdentificationEditPage.html", id); },
                PersonalSecurityProtection: function (val, id) { DialogShow(this, val, "PersonalSecurityProtectionPage.html", id); },
                PreworkSafetyMeasures: function (val, id) { DialogShow(this, val, "Pre_workSafetyMeasuresEditPage.html", id); },
                F_PreworkSafetyMeasures: function (val, id) { DialogShow(this, val, "F_PreworkSafetyMeasures.html", id); },

                Attachment: function (val, id) { DialogShow(this, val, "AttachmentUploadPage.html", id); },
                SpecialJobSelection: function (val, id) { DialogShow(this, val, "SpecialJobSelection.html", id); },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;

                            onSubmitForm(this, '/api/JobLicenseManagement/Save', mythis.Form);

                },
                handleCheckedCitiesChangeJobType: function (value) {
                },
                handleCheckedCitiesChangeHazardIdentification: function (value) {

                }, handleCheckedCitiesChangeProtection: function (value) {

                },
                handleCheckedCitiesChangeMeasures: function (value) {
                },
                handleCheckedCitiesChangeF_PreworkSafety: function (value) {
                }
                , getCheckData: function (sNum) {
                    var sid = "";
                    var arrayvalues = getDicData(sNum); 
                    var j = 0;
                    for (var i = 0; i < arrayvalues.length; i++) {
                        sid += arrayvalues[i].value+"，";
                    }

                    if (arrayvalues.length > 0) {
                        sid = sid.substr(0, sid.length - 1);
                    }

                    return sid;
                },
            },
            mounted: function () {

                var list = getDicDataArray(['04', '05', '06', '07', '10', '11', '12', '13', '14', '15', '16', '17']);
                this.JobType = getDicDatafromArray('04', list);//工作类型

                this.HazardIdentification = getDicDatafromArray('05', list);//危害意识
                this.PersonalSecurityProtection = getDicDatafromArray('06', list);//个人安全防护
                this.PreworkSafetyMeasures = getDicDatafromArray('07', list);//工作前安全措施（工作区域准备）：
                this.F_PreworkSafetyMeasures = getDicDatafromArray('17', list);//安全措施确认
                this.WorkRegion = getDicDatafromArray('10', list);
                this.WorkRegionA = getDicDatafromArray('11', list);
                this.ContractorList = getDicDatafromArray('12', list);
                this.JobApprover = getDicDatafromArray('13', list);
                this.JobApproverDepartment = getDicDatafromArray('14', list);
                this.TerritorialSupervisorDepartment = getDicDatafromArray('15', list);
                this.TerritorialSupervisorPeople = getDicDatafromArray('16', list);
                this.id = getUrlParam("id");
                this.getData();
                
                this.JobTypeStrs = this.getCheckData('04');//
                console.log("zzzzzzzzzzzzzzzzzzzz");
                console.log(randomValue('04'));
                console.log("zzzzzzzzzzzzzzzzzzzz");
                console.log(this.Form.CheckJobType)
            }
        });
    </script>
</body>
</html>